{% args info, hardware, dx_label, dxpin %}
   <script type="text/javascript">
    function copyDiv() {
        document.getElementById('sda').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"sda");
        document.getElementById('scl').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"scl");
        document.getElementById('miso').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"miso");
        document.getElementById('mosi').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"mosi");
        document.getElementById('sck').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"sck");
        document.getElementById('nss').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"nss");
        document.getElementById('tx').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"tx");
        document.getElementById('rx').innerHTML = document.getElementById('boardled').innerHTML.replace(/boardled/,"rx");
    }
    function setSel() {
        document.querySelector('#boardled [value="' + document.getElementById('boardled').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#sda [value="' + document.getElementById('sda').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#scl [value="' + document.getElementById('scl').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#miso [value="' + document.getElementById('miso').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#mosi [value="' + document.getElementById('mosi').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#sck [value="' + document.getElementById('sck').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#nss [value="' + document.getElementById('nss').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#tx [value="' + document.getElementById('tx').getAttribute("dxpin") + '"]').selected = true;
        document.querySelector('#rx [value="' + document.getElementById('rx').getAttribute("dxpin") + '"]').selected = true;
    }

    $(document).ready(function(){
        // Copies all contents of boardled select into all other selects
        copyDiv();
        // Set right selected value
        setSel();
   });
   </script>
   <form  method='post'>
   <table>
      <TH>Hardware Settings
      <TH>
      <TR>
         <TD>Status LED:
         <TD><div id="boardled" dxpin="{{hardware['boardled']}}">
            <select name='boardled'>
               <option value=''{% if hardware['boardled'] == "" %} selected{% endif %}> </option>
               {% for cnt in range(0,dx_label["count"]) %}
                    {% set dstr = 'd{}'.format(cnt) %}
                    <option value='{{dstr}}' {% if hardware[dstr] == 8  or dxpin[dstr] != '' %}disabled{% endif %}>{{dx_label[dstr]}}</option>
               {% endfor %}
            </select></div>
      <TR>
         <TD>Inversed LED:
         <TD><input type=checkbox id='inverseled' name='inverseled'{% if hardware['inverseled'] == 'on' %} checked{% endif %}>
      <TR>
         <TD colspan='2'>
            <h3>I2C Interface</h3>
      <TR>
         <TD>SDA:
         <TD>
            <div id="sda" dxpin="{{hardware['sda']}}"></div>
      <TR>
         <TD>SCL:
         <TD>
            <div id="scl" dxpin="{{hardware['scl']}}"></div>
      <TR>
         <TD colspan='2'>
            <h3>SPI Interface</h3>
      <TR>
         <TD>MISO:
         <TD>
            <div id="miso" dxpin="{{hardware['miso']}}"></div>
      <TR>
         <TD>MOSI:
         <TD>
            <div id="mosi" dxpin="{{hardware['mosi']}}"></div>
      <TR>
         <TD>SCK:
         <TD>
            <div id="sck" dxpin="{{hardware['sck']}}"></div>
      <TR>
         <TD>NSS:
         <TD>
            <div id="nss" dxpin="{{hardware['nss']}}"></div>
      <TR>
         <TD colspan='2'>
            <h3>UART Interface</h3>
      <TR>
         <TD>TX:
         <TD>
            <div id="tx" dxpin="{{hardware['tx']}}"></div>
      <TR>
         <TD>RX:
         <TD>
            <div id="rx" dxpin="{{hardware['rx']}}"></div>
      <TR>
         <TD colspan='2'>
            <h3>Dx Boot States</h3>
      <TR>
               <TD colspan='2'><a href='/dxbootstate'>Dx Boot States</a> <a class="button help" href="" target="_blank">&#10068;</a>
      <TR>
         <TD colspan='2'>
            <hr>
      <TR>
         <TD colspan='2'><a class="button link" href="hardware">Close</a><input class="button link" type='submit' value='Submit'>
      <TR>
         <TD>
   </table>
</form>
